<template>
  <div>
    <template v-for="item in currentLinkData" :key="`${item.code}`">
      <div class="link-group-title">{{ item.name }}</div>
      <RadioGroup v-bind="attrs" v-model:value="selectId" @change="handleChange">
        <template v-for="itemChild in item.children" :key="`${itemChild.code}`">
          <Radio :value="itemChild.id" :disabled="itemChild.disabled">
            {{ itemChild.name }}
          </Radio>
        </template>
      </RadioGroup>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, onMounted, nextTick } from "vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import {} from "./data"
  import { filter as filterTree, eachTree } from "/@/utils/helper/treeHelper"
  import { propTypes } from "/@/utils/propTypes"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { Radio } from "ant-design-vue"

  const RadioGroup = Radio.Group

  const selectId = ref<any>()
  const currentLinkData = ref<any[]>([])
  const selectLinkParam = ref<any>()
  const attrs = useAttrs({ excludeDefaultKeys: false })

  const emit = defineEmits(["register", "success", "update:value", "extParams"])

  const props = defineProps({
    value: propTypes.string,
    linkData: propTypes.any,
    allData: propTypes.any,
  })

  const handleTreeSelect = (id) => {
    const allData = props.allData
    const linkData = props.linkData
    currentLinkData.value = linkData.get(allData.get(id).code) || []
    console.log("currentLinkData", currentLinkData.value)
  }
  const handleChange = (e) => {
    console.log("e", e)
    emit("update:value", unref(selectId))
  }

  defineExpose({
    handleTreeSelect,
  })
</script>

<style lang="less">
  .link-group-title {
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: 5px;
  }
</style>
